<template>
  <div class="wrapper">
    <div class="top">
      <img class="community" :src="communityImg" alt="">
    </div>
    <div class="bottom">
      <router-link to="/carGuide">
        <img class="guide" :src="guideImg" alt="">
      </router-link>
      <router-link to="/commonProblem">
        <img class="question" :src="questionImg" alt="">
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Guide',
  data() {
    return {
      communityImg: "https://imgoss.wkzuche.com/banner/2020/1112/8b9ca4ab-8f93-4bb1-840f-99cb46d846d9.png?x-oss-process=image/resize,h_350",
      guideImg : "https://static.wkzuche.com/H5/images/wechat/home/guide-icon.png",
      questionImg: "https://static.wkzuche.com/H5/images/wechat/home/question-icon.png",
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  .top {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    .community {
      width: 100%;
      height: 100px;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    img {
      width: 171px;
      height: 65px;
    }
  }
}
</style>